import React, { Component, Fragment } from 'react';
import { Menu, Tooltip, Space } from 'antd';
import { connect } from 'dva'
import {
    UnorderedListOutlined,
    FileSearchOutlined,
    FileTextOutlined,
    ApartmentOutlined,
    SwapOutlined,
    HeatMapOutlined,
    DotChartOutlined,
    OrderedListOutlined,
    PieChartOutlined,
    AlertOutlined,
    AuditOutlined,
    ApiOutlined
} from '@ant-design/icons';

class AppMenu extends Component {
    constructor(props) {
        super(props)
        this.state = {
            collapsed: false,
        }
    }

    replacePage = ({ item, key, keyPath, domEvent }) => {
        this.props.dispatch({
            type: "app/appMenuReplacePage",
            data: key
        })
    }

    render() {
        if (this.props.isValuationPage) {
            return (
                <div style={{ width: 1080 }}>
                    <Menu
                        mode="horizontal"
                        theme="light"
                        inlineCollapsed={this.state.collapsed}
                        onClick={this.replacePage}
                        selectedKeys={this.props.selectedKey}
                        style={{ margin: "0 auto" }}
                    >
                        <Menu.Item key="/technologyValuation" icon={<OrderedListOutlined />}>了解技术估值</Menu.Item>
                        <Menu.Item key="/technologyValuation/technicalValuationPrinciple" icon={<AlertOutlined />} >技术估值原理</Menu.Item>
                        <Menu.Item key="/technologyValuation/qualitative" icon={<AuditOutlined />} >定性价值评估</Menu.Item>
                        <Menu.Item key="/technologyValuation/ration" icon={<AuditOutlined />} >定量价值评估</Menu.Item>
                    </Menu>
                </div>
            )
        }

        if (this.props.isPolicySimulationPage) {
            return (
                <div style={{ width: 1080 }}>
                    <Menu
                        mode="horizontal"
                        theme="light"
                        inlineCollapsed={this.state.collapsed}
                        onClick={this.replacePage}
                        selectedKeys={this.props.selectedKey}
                        style={{ margin: "0 auto" }}
                    >
                        <Menu.Item key="/policySimulation" icon={<OrderedListOutlined />}>了解政策模拟</Menu.Item>
                        <Menu.Item key="/policySimulation/policySimulationtool" icon={<ApiOutlined />} >模型工具</Menu.Item>
                    </Menu>
                </div>
            )
        }

        return (
            <div style={{ width: 1080 }}>
                <Menu
                    mode="horizontal"
                    theme="light"
                    inlineCollapsed={this.state.collapsed}
                    onClick={this.replacePage}
                    selectedKeys={this.props.selectedKey}
                    style={{ margin: "0 auto" }}
                >
                    <Menu.Item key="/technology" icon={<UnorderedListOutlined />}>首页</Menu.Item>
                    <Menu.Item key="/stv" icon={<DotChartOutlined />} >了解STV</Menu.Item>
                    <Menu.Item key="/verification" icon={<SwapOutlined />} >验证程序</Menu.Item>
                    <Menu.Item key="/application" icon={<HeatMapOutlined />} >申请验证</Menu.Item>
                    <Menu.Item key="/search" icon={<FileSearchOutlined />} >查询已验证技术</Menu.Item>
                    <Menu.Item key="/mechanism" icon={<ApartmentOutlined />} >机构</Menu.Item>
                    <Menu.Item key="/information" icon={<FileTextOutlined />} >资料下载</Menu.Item>
                    {/* <Menu.Item key="/patentDataSearch" icon={<PieChartOutlined />} >专利数据</Menu.Item>
                    <Menu.Item key="/policySimulation" icon={<OrderedListOutlined />} >政策模拟</Menu.Item> */}
                </Menu>
            </div>
        )
    }
}


const mapStateToProps = state => {
    let selectedKey = state.app.url
    return {
        selectedKey
    }
}

export default connect(mapStateToProps)(AppMenu)
